<template>
	<view>
		<uni-file-picker
				style="background-color: antiquewhite;"
				v-model="imageValue"  
				v-show="showEditImg"
				file-mediatype="image"
				mode="grid"
				title="修改头像"
				@select="selectImg"/>
		<view class="fistView" v-show="!showEditImg">
			<view class="headView"></view>
			<!-- 个人信息 -->
			<uni-card class="infoView" style="margin-top: -270rpx;" :is-shadow="false">
				<view class="fistView">
					<view>头像</view>
					<view class="imageView">
						<image :src="userInfo.avatar" v-show="userInfo && userInfo.avatar"></image>
						<image class="fistView" src="/static/images/右箭头.png" @click="showEditImg=true" v-if="userInfo && userInfo.avatar"></image>
						<text v-else @click="showEditImg=true">上传图片</text>
					</view>
				</view>

				<view class="secendView">
					<view>昵称</view>
					<view>{{userInfo.nickName}}</view>
				</view>
				
				<view class="secendView">
					<view>电话</view>
					<view>{{userInfo.phone}}</view>
				</view>
			</uni-card>
			<button v-if="userInfo.status==1" style="background-color: #23d18b; color: wheat; width: 80%;" @click="toIdentity()">
				实名制信息
			</button>

		</view>
	</view>
</template>

<script>
	import request from '../../../uitls/request';

	export default {
		data() {
			return {
				userInfo:{
					avatar:''
				},
				imageValue:[],
				showEditImg:false,
				header:{
					"Authorization": ''
				}
			}
		},
		methods: {
			selectImg(e){
				this.header.Authorization = uni.getStorageSync('token');
				// 显示加载提示
				uni.showToast({
				  title: '正在上传图片...',
				  icon: 'loading',  // 或者 'none'
				  mask: true,       // 防止用户操作
				  duration: 300000   // 设置一个较长的时间，避免自动消失
				});
				console.log(111,e.tempFiles[0]);
				const tfp = e.tempFilePaths[0];
				// #ifdef H5
				const baseUrl = 'http://localhost:9999/api'
				// #endif
				// #ifdef MP-WEIXIN
				const baseUrl = 'http://localhost:8080'
				// #endif
				const that = this;
				uni.uploadFile({
					url: baseUrl + '/file/upload',
					method:'POST',
					header: this.header,
					filePath:e.tempFilePaths[0],
					success(res) {
						// console.log(222,res.data)
						const result = JSON.parse(res.data)
						// console.log(result)
						if(result.code==200){
							that.userInfo.avatar = result.data.url
							// console.log(that.userInfo)
							request({
							   url:'/bigbase/info',
							   method: 'PUT',
							   data: that.userInfo,
							   success(res){
								  console.log(11111,res.data) 
									if(res.data.code==200){
										uni.setStorageSync('userInfo', that.userInfo);
										uni.hideLoading();
										uni.switchTab({
											url:'/pages/my/my'
										})
									}
							   }  
							})
						}
					}
					
				})
			},
			toIdentity(){
				uni.navigateTo({
					url:'/pages/yonghu1/identity/identity'
				})
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
		}
	}
</script>

<style>
	.headView {
		height: 300rpx;
		background-color: #2979ff;
	}

	/* 个人信息 */
	.infoView {
		/* background-color: rebeccapurple; */
		border-radius: 60rpx;
	}
	.infoView .fistView{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.infoView .fistView view:first-child{
		font-size: 28rpx;
		color: black;
		/* background-color: rebeccapurple; */
	}
	.infoView .fistView .imageView{
		display: flex;
		align-items: center;
		/* background-color: rebeccapurple; */
	}
	.infoView .fistView .imageView image:first-child{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
	.infoView .fistView .imageView image:nth-child(2){
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
		/* background-color: rebeccapurple; */
	}
	
	.infoView .secendView{
		/* background-color: rebeccapurple; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-top: 5rpx solid gainsboro;
		margin-top: 20rpx;
	}
	.infoView .secendView view{
		font-size: 28rpx;
		color: black;
	}
</style>